<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jquery.event.drop - Demos</title>
        <style type="text/css" media="screen">
            body {
                font: 12px / 16px Verdana, Arial, Helvetica, sans-serif;
                color: #002;
                padding: 0;
                margin: 20px;
            }
            
            code {
                display: block;
                background: #F9F9F9;
                border: 1px dashed #ABC;
                font: 12px / 16px "Courier New", Courier, monospace;
                padding: 10px;
                margin: 0 0 30px 0;
                white-space: pre;
                float: left;
            } .str {
                color: #00A;
            } .kwd {
                color: #808;
            } .com {
                color: #777;
            } .typ {
                color: #088;
            } .lit {
                color: #800;
            } .pun {
                color: #000;
            } .pln {
                color: #002;
            } .tag {
                color: #008;
            } .atn {
                color: #606;
            } .atv {
                color: #080;
            } .dec {
                color: #606;
            }
            
            p {
                margin: 0 0 5px 0;
            } .box {
                padding: 10px 20px;
                background: #CCC;
                border: 1px solid #AAA;
                text-align: center;
                font-size: 10px;
                margin: 0 0 10px 0;
            } .drag {
                height: 100px;
                width: 100px;
                float: left;
                border: 1px solid #AAA;
                background: #CCC;
                margin: 10px;
                cursor: move;
                font-size: 80px;
                text-align: center;
                line-height: 100px;
                color: #AAA;
            } .drop .drag {
                height: 77px;
                width: 77px;
                font-size: 70px;
                line-height: 77px;
            } .drop {
                height: 202px;
                width: 202px;
                float: left;
                border: 1px solid #AAA;
                background: #CCC;
                margin: 10px;
                padding: 10px;
                overflow: auto;
            } .ghost {
                position: absolute;
                filter: alpha(opacity=50);
            
            -moz-opacity:
                0.5;
            
            opacity:
                0.5;
            
            background-color:
                #CCF;
            
            border-color:
                #AAD;
            
            color:
                #AAD;
            } .outline {
                background-color: #FCC;
                border-color: #DAA;
                border-style: dashed;
                color: #DAA;
            } .active {
                background-color: #CFC;
                border-color: #ADA;
            } #nodrop {
                height: 120px;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
        </script>
        <script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-1.2.min.js" type="text/javascript">
        </script>
        <script src="http://threedubmedia.googlecode.com/files/jquery.event.drop-1.0.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
                $(".drag").bind("dragstart", function(event){
                    var $drag = $(this), $proxy = $drag.clone();
                    $drag.addClass("outline");
                    return $proxy.appendTo(document.body).addClass("ghost");
                }).bind("drag", function(event){
                    $(event.dragProxy).css({
                        left: event.offsetX,
                        top: event.offsetY
                    });
                }).bind("dragend", function(event){
                    $(event.dragProxy).fadeOut("normal", function(){
                        $(this).remove();
                    });
                    if (!event.dropTarget && $(this).parent().is(".drop")) {
                        $('#nodrop').append(this);
                    }
                    $(this).removeClass("outline");
                });

                $('.drop').bind("dropstart", function(event){
                    if (this == event.dragTarget.parentNode) 
                        return false;
                    $(this).addClass("active");
                }).bind("drop", function(event){
                    $(this).append(event.dragTarget);
                }).bind("dropend", function(event){
                    $(this).removeClass("active");
                });
            });
        </script>
    </head>
    <body>
        <div class="drop" title="Target A">
            <b>A</b>
        </div>
        <div class="drop" title="Target B">
            <b>B</b>
        </div>
        <div id="nodrop">
            <div class="drag" title="Div 1">
                1
            </div>
            <div class="drag" title="Div 2">
                2
            </div>
            <div class="drag" title="Div 3">
                3
            </div>
            <div class="drag" title="Div 4">
                4
            </div>
        </div>
    </body>
</html>
